<?php

?>

<script type="text/javascript">

	jQuery().ready(function($){
		var featuredSlider = $('#featured-slider').bxSlider({
			auto: true,
		    controls: false,
		    onNextSlide: function(currentSlideNumber, totalSlideQty, currentSlideHtmlObject){

			    //remove all focus on thumb
			    $('#movers-row a').removeClass('active-thumb');
		    	//set focus
		    	$('#movers-row a[class*="item-'+currentSlideNumber+'"]').addClass('active-thumb');
		    },
		    pause: 7000
		});

		// assign a click event to the external thumbnails
		$('#movers-row a').click(function(){
			var thumbIndex = $('#movers-row a').index(this);
			
			// call the "goToSlide" public function
		    featuredSlider.goToSlide(thumbIndex);
		  
		    // remove all active classes
		    $('#movers-row a').removeClass('active-thumb');
		    
		    // assisgn "active-thumb" to clicked thumb
		    $(this).addClass('active-thumb');

		    featuredSlider.startShow();
		    
		    // very important! you must kill the links default behavior
		    return false;
		});

		// assign "active-thumb" class to the first thumb
		$('#movers-row a:first').addClass('active-thumb');
	});
</script>


<?php if(!empty($list)): ?>

<div id="home-featured">
	<ul id="featured-slider">
		<?php foreach ($list as $key => $item): ?>
		<li>
			<?php if($item->item_id): ?>
			<a href="<?php echo JRoute::_(JE_ProductHelperRoute::getDetailRoute($item->item_id, $item->item_catid, $item->alias)); ?>">
				<img src="<?php echo $item->images; ?>" alt="Slideshow Image" title="<?php echo $item->title;?>" />
			</a>
			<?php else: ?>
				<img src="<?php echo $item->images; ?>" alt="Slideshow Image" title="<?php echo $item->title;?>" />
			<?php endif;?>
		</li>
		<?php endforeach; ?>
	</ul>
</div>
			
			
		<div id="movers-row">
			<?php foreach ($list as $key => $item): ?>
				<a href="#thumb-<?php echo $key;?>" class="cross-link item-<?php echo $key;?>">
					<img class="nav-thumb" src="<?php echo $item->thumb_images; ?>" alt="Thumbnail" title="<?php echo $item->title;?>" />
				</a>
			<?php endforeach; ?>
		</div>
		
		<div class="clr" style="clear:both;"></div>

<?php endif; ?>

<div class="clr"></div>